<template>
  <div class="time-spinner">
    <select :value="hours" @change="handleClick('hours', arguments[0])">
      <option v-for="(val, key) in hoursList" :value="key" v-if="!val" track-by="key">{{key}}</option>
    </select>
    <select :value="minutes" @change="handleClick('minutes', arguments[0])" v-if="showMinutes">
      <option v-for="(i, key) in 60" :value="key" >{{key}}</option>
    </select>
    <select :value="seconds" @change="handleClick('seconds', arguments[0])" v-if="showSeconds">
      <option v-for="(i, key) in 60" :value="key">{{key}}</option>
    </select>
  </div>
</template>

<script type="text/babel">
  import {DateUtils} from '../utils'

  export default {

    props: {
      hours: {
        type: Number,
        default: 0
      },

      minutes: {
        type: Number,
        default: 0
      },

      seconds: {
        type: Number,
        default: 0
      },

      showHours: {
        type: Boolean,
        default: true
      },

      showMinutes: {
        type: Boolean,
        default: true
      },

      showSeconds: {
        type: Boolean,
        default: true
      }
    },

    computed: {
      hoursList () {
        return DateUtils.getRangeHours(this.selectableRange)
      }
    },

    data () {
      return {
        selectableRange: []
      }
    },
    mounted () {
    },

    methods: {
      handleClick (type, evt) {
        let model = {
          hours: this.hours,
          minutes: this.minutes,
          seconds: this.seconds
        }
        model[type] = +evt.target.value
        this.$emit('change', model)
        this.emitSelectRange(type)
      },

      emitSelectRange (type) {
        if (type === 'hours') {
          this.$emit('select-range', 0, 2)
        } else if (type === 'minutes') {
          this.$emit('select-range', 3, 5)
        } else if (type === 'seconds') {
          this.$emit('select-range', 6, 8)
        }
      }
    }
  }
</script>
